<template>
  <transition name="translate">
    <div class="wrapper">
      <common-back :content="title"></common-back>
      <van-loading class="v-loading"
                   size="30px"
                   color="white"
                   v-show="loading" />
      <common-scroll class="scroll"
                     ref="scroll"
                     v-if="list.length"
                     :data="list">
        <div class="scroll-content">
          <common-product-list :isCalculate="false"
                               :isDetele="true"
                               :list="list"
                               :isCollectPage="false"></common-product-list>
        </div>
      </common-scroll>
      <div class="empty"
           v-if="isEmpty">收藏空空如也</div>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonScroll from 'common/scroll/scroll'
import CommonProductList from 'common/productList/list'
export default {
  name: '',
  components: {
    CommonBack,
    CommonScroll,
    CommonProductList
  },
  data () {
    return {
      title: '我的收藏',
      list: [],
      loading: true,
      isCollectPage: false
    }
  },
  computed: {
    isEmpty () {
      return !this.list.length
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$api.common.collect()
        .then(this.getListSucc)
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = data.collectios
        this.loading = false
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $space
  z-index 10

  .scroll
    top 98px
    background-color $space
    padding()

    .scroll-content
      padding-bottom 10px
      box-sizing border-box

  .empty
    position absolute
    font-size $address_name
    font-weight 400
    color $original_price
    top 50%
    left 50%
    transform translate(-50%, -50%)

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
